<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="实名认证"
      left-arrow
      :border="false"
      fixed
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top"></div>

    <div class="register-form">
      <van-cell-group>
        <van-field
          v-model="model.realName.value"
          required
          clearable
          :label="model.realName.label"
          placeholder="请输入真实姓名"
        />
        <van-field
          v-model="model.idCard.value"
          required
          clearable
          :label="model.idCard.label"
          placeholder="请输入身份证号码"
        />
        <van-cell class="flex-v-c" title="身份证正面" required>
          <van-uploader
            slot="right-icon"
            v-model="idCardFront"
            :max-count="1"
            :after-read="(file,detail)=>{afterRead(file,detail,'front')}"
            @delete="(file,detail)=>{afterDelete(file,detail,'front')}"
            preview-size="2.5rem"
            upload-text="正面"
          />
        </van-cell>
        <van-cell class="flex-v-c" title="身份证反面" required>
          <van-uploader
            slot="right-icon"
            v-model="idCardBack"
            :max-count="1"
            :after-read="(file,detail)=>{afterRead(file,detail,'back')}"
            @delete="(file,detail)=>{afterDelete(file,detail,'back')}"
            preview-size="2.5rem"
            upload-text="反面"
          />
        </van-cell>
      </van-cell-group>

      <div class="mtb-30 plr-20">
        <van-button type="danger" size="large" @click="submit">确认认证</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { upLoad } from 'api/upload'

export default {
  components: {},
  data() {
    return {
      model: {
        realName: {
          label: '真实姓名',
          value: '',
          require: true,
          requireMessage: '请输入真实姓名'
        },
        idCard: {
          label: '身份证号码',
          value: '',
          require: true,
          requireMessage: '请输入身份证号码',
          pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
          patternMessage: '身份证号码格式有误'
        },
        idCardFront: {
          label: '身证份正面',
          value: '',
          require: true,
          requireMessage: '请上传身份证正面'
        },
        idCardBack: {
          label: '身证份反面',
          value: '',
          require: true,
          requireMessage: '请上传身份证反面'
        }
      },
      idCardFront: [],
      idCardBack: []
    }
  },
  methods: {
    afterRead(file, detail, type) {
      upLoad({
        Content: this.$utils.getCaption(file.content, 'base64,'),
        FileType: this.$utils.getCaption(file.file.type, '/')
      }).then(res => {
        //console.log(res);
        if (res) {
          if (type == 'front') {
            this.model.idCardFront.value = res.Data.Path
          } else if (type == 'back') {
            this.model.idCardBack.value = res.Data.Path
          }
        }
      })
    },
    afterDelete(file, detail, type) {
      if (type == 'front') {
        this.model.idCardFront.value = ''
      } else if (type == 'back') {
        this.model.idCardBack.value = ''
      }
    },
    submit() {
      let self = this
      // 表单验证
      if (self.$utils.formValidate(self.model).valid) {
        this.$toast({
          type: 'success',
          message: '已提交认证审核',
          forbidClick: true,
          onClose: function() {
            self.$router.back()
          }
        })
      } else {
        this.$toast(self.$utils.formValidate(self.model).msg)
      }
    }
  },
  created() {}
}
</script>

<style lang="scss" scoped>
.van-uploader {
  /deep/ .van-uploader__upload,
  /deep/ .van-uploader__preview {
    margin: 0;
  }
}
</style>
